@import url("../assets/fonts/fontawesome/css/all.css");

@font-face {
    font-family: Poppins-Regular;
    src: url('../assets/fonts/poppins/Poppins-Regular.otf');
}

@font-face {
    font-family: Poppins-Medium;
    src: url('../assets/fonts/poppins/Poppins-Medium.otf');
}

@font-face {
    font-family: Poppins-Bold;
    src: url('../assets/fonts/poppins/Poppins-Bold.otf');
}

@font-face {
    font-family: Poppins-SemiBold;
    src: url('../assets/fonts/poppins/Poppins-SemiBold.otf');
}

div.card-xl {
    margin: 10px;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    /* border: 1px solid rgba(0,0,0,.125); */
    border-radius: .25rem;
    border: 1px solid #C0392B !important;
}

div.table-contents {
    /* font-family: sans-serif, 'Georgia', 'Poppins-Regular'; */
    padding: 3px;
    margin: 2px;
}

.table-header,
.thead-room-records {
    background-color: #FFC200;
}

div.card-xl .card-module-header {
    font-family: Georgia, serif;
    padding: 2px;
    margin: 2px;
    max-height: 40px;
    text-transform: uppercase;
    background: #7D3C98;
    color: white;
}

div.card-xl .card-body {
    /* font-family: 'Poppins-Regular', Georgia, sans-serif; */
    padding: 5px;
    margin: 5px;
}

/* File Preview Thumbnail Styles */

div.fileinput-preview.thumbnail img {
    width: 200px;
    height: 200px;
    background-size: cover;
    display: block;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border: 2px solid purple;
}

/* button positions */

.form-top-right {
    top: 30;
}

.form-bottom {
    bottom: -10;
    position: absolute;
}

.form-bottom-center {
    bottom: 0;
    position: absolute;
}

span.required {
    color: #FF4500;
}

.module-header-display {
    color: #E74C3C;
    font-size: 25;
}

span.module-footer-display {
    color: purple;
    font-size: 20;
}

/* Table auto increment row numbering */

table {
    counter-reset: rowNumber;
}

table tbody tr th[scope="row"],
table tbody tr td[scope="row"] {
    counter-increment: rowNumber;
}

table tbody tr th[scope="row"]:first-child::before,
table tbody tr td[scope="row"]:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
    text-align: center;
}

div.bootstrap-select.full-width {
    width: 100% !important;
}

.button.active.True {
    background-color: #9B59B6;
    border: none;
    color: white;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 2px;
    max-width: 100px;
    max-height: 30px;
}

.button.active.False {
    background-color: #5DADE2;
    border: none;
    color: white;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 2px;
    max-width: 100px;
    max-height: 30px;
}

label.academic-status,
label.room_category-status {
    display: none;
}

/* Radio Button related styles */

.middle {
    width: 100%;
    text-align: left;
    /* Made by */
}

.middle h1 {
    font-family: sans-serif;
    color: #fff;
}

.middle input[type="radio"] {
    display: none;
}

.middle input[type="radio"]:checked + .box {
    background-color: #007e90;
    border: 2px solid orange;
}

.middle input[type="radio"]:checked + .box span {
    color: #007e90;
    transform: translateY(20px);
    padding-top: 5px;
}

.middle input[type="radio"]:checked + .box span:before {
    transform: translateY(-5px);
    opacity: 1;
}

.middle .box {
    width: 80px;
    height: 60px;
    background-color: #fff;
    transition: all 250ms ease;
    will-change: transition;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    position: relative;
    font-family: sans-serif;
    font-weight: 800;
}

.middle .box:active {
    transform: translateY(20px);
}

.middle .box span {
    position: absolute;
    transform: translate(0, 5px);
    left: 0;
    right: 0;
    transition: all 500ms ease;
    font-size: 1em;
    user-select: none;
    /* color: #007e90; */
    color: #007e9061;
}

.middle .box span:before {
    font-size: 1.3em;
    display: block;
    transform: translateY(-40px);
    opacity: 0;
    transition: all 300ms ease-in-out;
    font-weight: normal;
    color: white;
}

.middle .front-end span:before {
    content: '\f183';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.middle .back-end span:before {
    content: '\f182';
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
}

.middle p {
    color: #fff;
    font-family: sans-serif;
    font-weight: 300;
}

.middle p span:after {
    content: '\f0e7';
    font-family: FontAwesome;
    color: yellow;
}

hr.card-hr {
    background-color: #FF5733;
    height: 1px;
}

div.card-header.tabs {
    background-color: white;
    border: none;
}

div.add-record {
    content: '\f182';
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 1500;
}

.button-purple {
    background: purple;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

.button-green {
    background: green;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

.button-orangered {
    background: #FF4500;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

.button-cyan {
    background: #00FFFF;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

.button-sandybrown {
    background: #F4A460;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

.button-maroon {
    background: #800000;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

.button-red {
    background: red;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

.button-dodgerblue {
    background: #1E90FF;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

.button-royalblue {
    background: rgb(7, 123, 255);
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

.button-bluedark {
    background: rgb(20, 20, 250);
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

.button-blue {
    background: #0000FF;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

.button-brown {
    background: #A52A2A;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

tr.req-details-header {
    font-weight: bold;
}

.adjacent-elements {
    display: inline;
}

.requisition-details-footer td,
.tfoot-requisition td,
.tfoot-invoice td,
.tfoot-room-records td {
    border: 0;
}

span.no-records-found {
    font-family: Georgia, serif;
    padding: 2px;
    margin: 2px;
    max-height: 40px;
    text-transform: uppercase;
    background: #7D3C98;
    color: white;
}

div.no-records-found {
    min-height: 25%;
}


input.button.active_1 {
    background: purple;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

input.button.active_0 {
    background: rgb(78, 78, 78);
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc);
}

.circle_0 {
    width: 25px;
    height: 25px;
    background: yellow;
    border: 3px solid red;
}

.circle_1 {
    width: 25px;
    height: 25px;
    background: rgb(87, 236, 1);
    border: 3px solid red;
}

.circle_2 {
    width: 25px;
    height: 25px;
    background: red;
    border: 3px solid green;
}

.mess-bill-computation {
    border: 1px solid black;
    width: 49%;
    display: inline-block;
    margin: 0 auto;
}

/* Updated Styles */

.dashboard-card {
    color: white
}

.menu {
    -ms-flex: 20%;
    /* IE10 */
    flex: 8%;
    background-color: #ffffff;
    padding: 5px;
    height: auto;
    max-width: 18%;
    overflow-y: auto;
}

.page-contents {
    overflow: hidden;
    display: flex;
}

.menu-content {
    /*float: left;*/
    width: 15%;
    overflow: hidden;
}

/* 
.tab-content {
    margin-left: 19%;
} */

.container-no-marginpadding {
    padding-left: 1px;
}

.view-invoice-container {
    width: 100%;
}

.action-button {
    width: 3em;
    height: 2.5em;
}

.bootstrap-select .dropdown-menu {
    position: relative;
    width: 100% !important;

}

.minimal-padding {
    padding-left: 5px;
    padding-right: 5px;
}

.generate-mess-bill {
    float: right;
    margin: 10px;
}

/* Styles for Color Codes */
.color-code-information {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    float: right;
}

.color-code {
    display: -webkit-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.color-code-yellow {
    background: yellow;
    width: 1em;
    height: 1em;
    border: 2px solid black;
    float: left;
}

.color-code-green {
    background: rgb(87, 236, 1);
    width: 1em;
    height: 1em;
    border: 2px solid black;
    float: left;
}

.color-code-red {
    background: red;
    width: 1em;
    height: 1em;
    border: 2px solid black;
    float: left;
}

.color-code-yellow-information,
.color-code-green-information,
.color-code-red-information {
    margin-left: 0.2em;
}

.room-availability {
    width: 12.8em;
    height: 5em;
    margin: 0.2em;
    display: inline-flex;
    border: 2px solid black;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.room-availability:hover {
    opacity: 0.5;
    filter: alpha(opacity=75); /* For IE8 and earlier */
}

.room-availability.available {
    background: yellow;
}

.room-availability.partially-occupied {
    background: rgb(87, 236, 1);
}

.room-availability.fully-occupied {
    background: red;
}

.current-room-number, .current-room-occupancy, .current-room-category {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: bold;
}

.current-room-category {
    height: 30%;
}

.current-room-group, .allocate_hostel_rooms {
    position: relative;
    display: block;
    text-align: center;
    width: 100% !important;
    color: #000;
}

.display-block {
    display: block;
}

.circle-props {
    width: 1em;
    height: 1em;
    margin-right: 0.2em;
}

.color-code-information {
    margin-right: 0.5em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 0.75em;
}

.no-margin-right {
    margin-right: 0px;
    padding-right: 0px;
}

.member-report-content {
    padding: 20px;
}

.member-report-header {
    margin: 0 auto;
    height: 50px;
}

.table-header-dept-name {
    font-size: 2em;
    color: purple;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
}

.table-header-message {
    font-size: 1em;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
}

.default-padding-right {
    padding-right: 5px;
}

/* File Upload Styles */


.file-uploads {
    border: 2px dashed #3B2F2F;
}

.file-uploads p {
    width: 100%;
    height: 50%;
    text-align: center;
    padding-top: 3%;
    margin-bottom: 0;
    margin-top: 0;
    color: purple;
}

.file-uploads input {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 50%;
    outline: none;
    opacity: 0;
}

.bulk-upload-label {
    font-size: 1rem;
    font-weight: 600;
}

.no-records {
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.bootstrap-select button,
.bootstrap-select button:hover {
    background: white !important;
    border: 0.06em solid gray;
}

@viewport {
    height: 500px;
}

.errors {
    color: #fa4949;
    font-size: 14px;
}

.color-orangered {
    background-color: orangered;
}


#member-mess-header-month {
    min-width: 120px;
}

#member-mess-opening-bal, #member-mess-closing-bal, #member-hostel-opening-bal, #member-hostel-closing-bal {
    min-width: 200px;
}

#member-mess_payment-info, #member-hostel_payment-info {
    min-width: 200px;
}

/* Styles for Toggle Switch */

/*div.checkbox.switcher label, div.radio.switcher label {*/
/*  padding: 0;*/
/*}*/
/*div.checkbox.switcher label *, div.radio.switcher label * {*/
/*  vertical-align: middle;*/
/*}*/
div.checkbox.switcher label input, div.radio.switcher label input {
    display: none;
}

div.checkbox.switcher label input + span, div.radio.switcher label input + span {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 56px;
    height: 28px;
    background: rgba(250, 32, 32, 0.81);
    border: 1px solid rgba(250, 32, 32, 0.81);
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
}

div.checkbox.switcher label input + span small, div.radio.switcher label input + span small {
    position: absolute;
    display: block;
    width: 50%;
    height: 100%;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    left: 0;
}

div.checkbox.switcher label input:checked + span, div.radio.switcher label input:checked + span {
    background: #09ad02;
    border-color: #09ad02;
}

div.checkbox.switcher label input:checked + span small, div.radio.switcher label input:checked + span small {
    left: 50%;
}

.mess-year-end-balance-label, .hostel-year-end-balance-label {
    font-weight: bold;
    color: rebeccapurple;
    background: #faeabb;
}

.mess-year-end-balance-label.credit, .hostel-year-end-balance-label.credit, .member_dashboard.credit {
    color: #2cc604;
}

.mess-year-end-balance-label.debit, .hostel-year-end-balance-label.debit, .member_dashboard.debit {
    color: #bf0137;
}

.grey-bg {
    background-color: #F5F7FA;
}

.white-bg {
    background-color: #FFFFFF;
}

.purple-color {
    padding: 8px 15px 8px 15px;
    border: none;
    color: purple;
}

.green-color {
    padding: 8px 15px 8px 15px;
    border: none;
    color: green;
}

.orangered-color {
    padding: 8px 15px 8px 15px;
    border: none;
    color: #FF4500;
}

.cyan-color {
    padding: 8px 15px 8px 15px;
    border: none;
    color: #00FFFF;
}

.sandybrown-color {
    padding: 8px 15px 8px 15px;
    border: none;
    color: #F4A460;
}

.maroon-color {
    padding: 8px 15px 8px 15px;
    border: none;
    color: #800000;
}

.red-color {
    padding: 8px 15px 8px 15px;
    border: none;
    color: red;
}

.dodgerblue-color {
    padding: 8px 15px 8px 15px;
    border: none;
    color: #1E90FF;
}

.royalblue-color {
    padding: 8px 15px 8px 15px;
    border: none;
    color: rgb(7, 123, 255);
}

.bluedark-color {
    padding: 8px 15px 8px 15px;
    border: none;
    color: rgb(20, 20, 250);
}

.blue-color {
    padding: 8px 15px 8px 15px;
    border: none;
    color: #0000FF;
}

.brown-color {
    padding: 8px 15px 8px 15px;
    border: none;
    color: #A52A2A;
}

/* Fixed Table Header Styles */

.width_50_percent {
    width: 50%;
}

thead {
    /*position: sticky;*/
    top: 5rem;
}

.member-hostel-mess-balance-sheet thead {
    /*position: sticky;*/
    top: 1rem;
}

a .hover-img {
    position: relative;
}

a .hover-img span {
    position: absolute;
    left: -9999px;
    top: -9999px;
    z-index: 9999;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

a:hover .hover-img span {
    top: 20px;
    left: 0;
    display: block;
}

/*body {*/
/*  margin:0px;*/
/*  height:100vh;*/
/*  background: #1283da;*/
/*}*/
.center {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}

.form-input {
    width: 100%;
    padding: 20px;
    background: #fff;
    box-shadow: -3px -3px 7px rgba(94, 104, 121, 0.377),
    3px 3px 7px rgba(94, 104, 121, 0.377);
}

.form-input input {
    display: none;

}

.form-input label {
    display: block;
    width: auto;
    height: auto;
    /*margin-left: 25%;*/
    line-height: 50px;
    text-align: center;
    background: #1172c2;

    color: #fff;
    font-size: 15px;
    font-family: "Open Sans", sans-serif;
    text-transform: Uppercase;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}

.form-input img {
    width: 200px;
    height: 200px;
    display: none;
    margin: 0 auto;
    margin-bottom: 10px;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
}

.presuffix_input {
    position: relative;
    z-index: 2;
    float: left;
    width: 100% !important;
    margin-bottom: 0;
    display: table-cell;
    padding: 6px 12px;
    border: 1px solid #ccc;
    margin: 0;
}

.suffix input {
    border-radius: 4px 0px 0px 4px;
}

.suffix .input-group-addon {
    border-left: 0;
    border-radius: 0px 4px 4px 0px;
}

.prefix input {
    border-radius: 0px 4px 4px 0px;
}

.prefix .input-group-addon {
    border-right: 0;
    border-radius: 4px 0px 0px 4px;
}

.presuffix input {
    border-radius: 0px;
}

.input-group-addon.prefix {
    border-radius: 4px 0px 0px 4px;
    border-right: 0;
}

.input-group-addon.suffix {
    border-radius: 0px 4px 4px 0px;
    border-left: 0;
}

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

/* If the screen size is 1200px wide or more, set the font-size to 80px */
@media (min-width: 1200px) {
    .responsive-font {
        font-size: 1rem;
    }
}

/* If the screen size is smaller than 1200px, set the font-size to 80px */
@media (max-width: 1199.98px) {
    .responsive-font {
        font-size: 1rem;
    }
}

.privacy-policy {
    font-size: 1.3rem;
    text-justify: auto;
}

.bootstrap-datetimepicker-widget {
    z-index: 9999 !important;
}

.nav-pills > li > a.active {
    background-color: purple !important;
    color: white !important;
    border-bottom: 6px solid yellow !important;
}

.bg-purple{
    background-color: purple;
}

.small-fontsize{
    font-size: 12px;
}